import {Layout} from '../../src/Layout';
export default Layout;

import docs from 'docs:react-aria-components';
import '../../tailwind/tailwind.css';

export const tags = ['file', 'drag', 'dnd', 'upload'];
export const relatedPages = [{'title': 'useDrop', 'url': 'useDrop'}];
export const description = 'An area into which one or multiple objects can be dragged and dropped.';

# DropZone

<PageDescription>{docs.exports.DropZone.description}</PageDescription>

<ExampleSwitcher>
  ```tsx render type="vanilla" files={["starters/docs/src/DropZone.tsx", "starters/docs/src/DropZone.css"]}
  "use client";
  import {DropZone} from 'vanilla-starter/DropZone';
  import {Text} from 'react-aria-components';
  import {useState} from 'react';

  function Example() {
    let [content, setContent] = useState(null);
    return (
      <DropZone
        // Determine whether dragged content should be accepted.
        getDropOperation={types => (
          ['text/plain', 'image/jpeg', 'image/png', 'image.gif'].some(t => types.has(t))
            ? 'copy'
            : 'cancel'
        )}
        onDrop={async (event) => {
          // Find the first accepted item.
          let item = event.items.find(item => (
            (item.kind === 'text' && item.types.has('text/plain')) ||
            (item.kind === 'file' && item.type.startsWith('image/'))
          ));

          if (item?.kind === 'text') {
            let text = await item.getText('text/plain');
            setContent(text);
          } else if (item?.kind === 'file') {
            let file = await item.getFile();
            let url = URL.createObjectURL(file);
            setContent(<img src={url} alt={item.name} style={{maxHeight: 100, maxWidth: '100%'}} />)
          }
        }}>
        <Text slot="label">
          {content || "Drop or paste text or images here"}
        </Text>
      </DropZone>
    );
  }
  ```

  ```tsx render type="tailwind" files={["starters/tailwind/src/DropZone.tsx"]}
  "use client";
  import {DropZone} from 'tailwind-starter/DropZone';
  import {Text} from 'react-aria-components';
  import {useState} from 'react';

  function Example() {
    let [content, setContent] = useState(null);
    return (
      <DropZone
        // Determine whether dragged content should be accepted.
        getDropOperation={types => (
          ['text/plain', 'image/jpeg', 'image/png', 'image/gif'].some(t => types.has(t)) ? 'copy' : 'cancel'
        )}
        onDrop={async (event) => {
          // Find the first accepted item.
          let item = event.items.find(item => (
            (item.kind === 'text' && item.types.has('text/plain')) ||
            (item.kind === 'file' && item.type.startsWith('image/'))
          ));

          if (item?.kind === 'text') {
            let text = await item.getText('text/plain');
            setContent(text);
          } else if (item?.kind === 'file') {
            let file = await item.getFile();
            let url = URL.createObjectURL(file);
            setContent(<img src={url} alt={item.name} style={{maxHeight: 100, maxWidth: '100%'}} />)
          }
        }}>
        <Text slot="label">
          {content || "Drop or paste text or images here"}
        </Text>
      </DropZone>
    );
  }
  ```
</ExampleSwitcher>

## Examples

<ExampleList tag="dropzone" pages={props.pages} />

## API

```tsx links={{DropZone: '#dropzone'}}
<DropZone>
  <Text slot="label" />
</DropZone>
```

### DropZone

<PropTable component={docs.exports.DropZone} links={docs.links} />
